<template>
	<div class="my">
		<header>
			<div class="userInfo" v-if="loginStatus">
				<img :src="userInfo.imgUrl" alt="">
				<span>{{userInfo.nickName}}</span>
			</div>
			<div class="login" @click="goLogin" v-else>登录/注册</div>
		</header>
		<section>
			<ul>
				<li>地址管理</li>
				<li v-if="loginStatus" @click="loginOut">退出登录</li>
			</ul>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
	import  Tabbar  from "@/components/common/Tabbar.vue";
	import {mapMutations, mapState} from 'vuex';
	export default{
		name:"My",
		components: {
			Tabbar,
		},
		computed:{
			...mapState({
				//登录的状态值
				loginStatus:state=>state.user.loginStatus,
				//登录的用户相关信息
				userInfo:state=>state.user.userInfo,
			})
		},
		methods:{
			...mapMutations(['loginOut']),
			goLogin(){
				this.$router.push('/login');
			},
		}
	};
</script>
<style scoped>
.my{
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
header{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 10rem;
	background-color: green;
	
}
header .userInfo{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

}
header .userInfo img{
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 50%;
}
header .userInfo span{
	padding: 1.25rem 0;
	color: #fff;
	font-size: 1.125rem;
}
.login{
	padding: 0.375rem 0.9375rem;
	font-size: 1rem;
	color: #fff;
	background-color: #f6ab32;
	border-radius: 0.375rem;

}
section{
	flex: 1;
	overflow: hidden;
}
section ul li{
	padding: 0.9375rem;
	font-size: 1rem;
}
</style>
